<!-- userlogin -->
<template>
  <div class="userlogin">
    <div class="user_login">
      <p class="login_tit">主题宴助理e平台</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="300px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item label="用户名" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入用户名"
            @focus="loginerrFocus"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            placeholder="请输入用户密码"
            @focus="loginerrFocus"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="login_err" v-show="loginerr">账户名或登录密码不正确</div>
      <div class="login_btn" @click="loginClick">登录</div>
    </div>
  </div>
</template>

<script>
import { postAccountlogin } from "@/api/user.js";
import { requestCode } from "@/utils";

import md5 from "js-md5";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
    };
    return {
      labelPosition: "top",
      ruleForm: {
        pass: "",
        name: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        name: [{ validator: checkName, trigger: "blur" }],
      },
      loginerr: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async loginClick() {
      let pass = md5(this.ruleForm.pass);
      var params = new FormData();
      params.append("password", pass);
      params.append("account", this.ruleForm.name);
      let info = await postAccountlogin(params);
      if (info.data.code == 0) {
        requestCode(info, "登录成功");
        localStorage.setItem("eplatformtoken", info.data.data.userToken);
        localStorage.setItem("eplatformid", info.data.data.userId);
        localStorage.setItem("eplatformname", info.data.data.userName);
        localStorage.setItem("eplatformpowertype", info.data.data.powerType);
        this.$router.push("/content");
        console.log("1111111111");
      } else {
        this.loginerr = true;
        this.ruleForm.pass = "";
        this.ruleForm.name = "";
      }
    },
    loginerrFocus() {
      this.loginerr = false;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.login_err {
  color: red;
}
.userlogin {
  width: 100vw;
  height: 100vh;
  background: url(../../assets/img/登录页面bg.png) no-repeat;
  background-size: cover;
  .cen();
  .user_login {
    width: 400px;
    height: 400px;
    padding: 30px 60px 58px;
    background-color: #fff;
    border-radius: 12px;
    color: #2b2b2b;
    font-size: 14px;
    .divDFAF();
    .login_tit {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 30px;
    }
    // .login_name {
    //   width: 100%;
    //   & > p {
    //     font-weight: 600;
    //     margin-bottom: 12px;
    //   }
    //   & > input {
    //     width: 100%;
    //     height: 35px;
    //     border: 1px solid #2b2b2b;
    //     padding: 10px 13px 11px 13px;
    //     border-radius: 2px;
    //   }
    // }
    .login_btn {
      width: 100%;
      height: 40px;
      background: #2b2b2b;
      color: #fff;
      margin-top: 20px;
      .cen();
    }
  }
  .name {
    margin-bottom: 20px;
  }
}
.demo-ruleForm {
  width: 100% !important;
}
</style>